<template>
  <div class="app-container">
    <!-- 表格展示 -->
    <el-table v-loading="loading" :data="reportList">
      <el-table-column label="车辆编号" align="center" prop="carId" />
      <el-table-column label="使用次数" align="center" prop="totalUsageCount" />
      <el-table-column label="使用天数" align="center" prop="totalDaysUsed" />
      <el-table-column label="总费用" align="center" prop="totalFee" />
    </el-table>

    <!-- 图表展示区域 -->
    <div class="echart-container">
      <!-- 使用次数图表 -->
      <el-card shadow="never">
        <div class="echart" id="usage-count-chart" :style="{ width: '100%', height: '400px' }"></div>
      </el-card>

      <!-- 使用天数图表 -->
      <el-card shadow="never" style="margin-top: 20px;">
        <div class="echart" id="usage-days-chart" :style="{ width: '100%', height: '400px' }"></div>
      </el-card>

      <!-- 总费用图表 -->
      <el-card shadow="never" style="margin-top: 20px;">
        <div class="echart" id="total-fee-chart" :style="{ width: '100%', height: '400px' }"></div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { listReport } from "@/api/lh/carrequest";
import * as echarts from 'echarts';

export default {
  name: "Report",
  data() {
    return {
      reportList: [],  // 后端返回的数据
      loading: false,   // 是否加载中
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // 获取报表数据
    getList() {
      this.loading = true;
      listReport()  // 获取车辆使用数据
        .then(response => {
          console.log('返回的数据:', response);  // 输出数据确认        
          this.reportList = response;
          this.renderCharts();  // 渲染图表
        })
        .finally(() => {
          this.loading = false;
        });
    },

    // 渲染图表
    renderCharts() {
      if (!this.reportList || this.reportList.length === 0) return;

      // 提取车辆编号、使用次数、使用天数、总费用数据
      const carIds = this.reportList.map(item => `车 ${item.carId}`);
      const totalUsageCounts = this.reportList.map(item => item.totalUsageCount);
      const totalDaysUsed = this.reportList.map(item => item.totalDaysUsed);
      const totalFees = this.reportList.map(item => item.totalFee);

      // 使用次数图表配置
      const usageCountOption = {
        tooltip: {
          trigger: 'axis',
          axisPointer: { type: 'shadow' },
        },
        xAxis: {
          type: 'category',
          data: carIds,
          axisLabel: { rotate: 45 },
        },
        yAxis: {
          type: 'value',
          name: '使用次数',
        },
        series: [
          {
            name: '使用次数',
            type: 'bar',
            data: totalUsageCounts,
            itemStyle: { color: '#83bff6' },
            label: {
              show: true,
              position: 'top',
              formatter: (params) => `${params.data} 次`,  // 添加每个条形图顶部数据
            },
          },
        ],
        grid: { left: '3%', right: '4%', bottom: '15%', containLabel: true },
      };

      // 使用天数图表配置
      const usageDaysOption = {
        tooltip: {
          trigger: 'axis',
          axisPointer: { type: 'shadow' },
        },
        xAxis: {
          type: 'category',
          data: carIds,
          axisLabel: { rotate: 45 },
        },
        yAxis: {
          type: 'value',
          name: '使用天数',
        },
        series: [
          {
            name: '使用天数',
            type: 'bar',
            data: totalDaysUsed,
            itemStyle: { color: '#188df0' },
            label: {
              show: true,
              position: 'top',
              formatter: (params) => `${params.data} 天`,  // 添加每个条形图顶部数据
            },
          },
        ],
        grid: { left: '3%', right: '4%', bottom: '15%', containLabel: true },
      };

      // 总费用图表配置
      const totalFeeOption = {
        tooltip: {
          trigger: 'axis',
          axisPointer: { type: 'shadow' },
        },
        xAxis: {
          type: 'category',
          data: carIds,
          axisLabel: { rotate: 45 },
        },
        yAxis: {
          type: 'value',
          name: '费用 (元)',
        },
        series: [
          {
            name: '总费用',
            type: 'bar',
            data: totalFees,
            itemStyle: { color: '#ff7f50' },
            label: {
              show: true,
              position: 'top',
              formatter: (params) => `${params.data} 元`,  // 添加每个条形图顶部数据
            },
          },
        ],
        grid: { left: '3%', right: '4%', bottom: '15%', containLabel: true },
      };

      // 渲染图表
      const usageCountChart = echarts.init(document.getElementById('usage-count-chart'));
      usageCountChart.setOption(usageCountOption);

      const usageDaysChart = echarts.init(document.getElementById('usage-days-chart'));
      usageDaysChart.setOption(usageDaysOption);

      const totalFeeChart = echarts.init(document.getElementById('total-fee-chart'));
      totalFeeChart.setOption(totalFeeOption);

      // 窗口大小变化时，自动调整图表大小
      window.addEventListener('resize', () => {
        usageCountChart.resize();
        usageDaysChart.resize();
        totalFeeChart.resize();
      });
    },
  }
};
</script>

<style scoped>
.app-container {
  padding: 20px;
}

.echart-container {
  margin-top: 20px;
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
}

.echart {
  width: 100%;
  height: 400px;
}
</style>
